<template>
  <div class="home">
    <div class="home-header"></div>
    <h1>Pock</h1>
    <h2>这是一个不断完善的组件库, 希望 jser 一起 Happy !</h2>
    <div class="home-go">
      <Button type="success" shape="circle" @click="goto">
        <span>
          GO
          <Icon type="md-arrow-forward" />
        </span>
      </Button>
    </div>
    <div class="home-body">
      <readme></readme>
    </div>
    <div class="home-footer">
      <p>
        <a class="b_b" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备19002337号-1</a>
        |
        <a class="b_b" href="https://beian.miit.gov.cn/" target="_blank">2019-2029 © Sora</a>
      </p>
    </div>
  </div>
</template>
<script>
import logo from "./components/logo";
import readme from "./components/readme";
export default {
  components: {
    logo,
    readme
  },
  methods: {
    goto() {
      this.$router.push({
        path: "item"
      })
    }
  }
};
</script>
<style lang="less" scoped>
.home {

  font-size: 1rem;
  text-align: center;

  width: 100VW;
  height: 100vh;

  background-clip: border-box;
  background-repeat: no-repeat;
  background-color: #00bfdc11;
  background-image: url("~@/assets/bg.svg");
  background-size: 100vw;
  background-position: bottom;

  h1 {
    margin: 2rem;
    font-size: 4rem;
    color: transparent;
    background-clip: text;
    background-image: url('~@/assets/mesh.png');
  }

  h2 {
    font-size: 1.5rem;
  }

  .home-header {
    width: 100%;
    height: 12vh;
  }

  .home-go {
    margin: 1rem;
    span {
      font-size: 1.25rem;
      font-weight: 600;
      vertical-align:bottom;
    }
  }

  .home-body {
    margin: 1rem;
    display: flex;
    justify-content: center;
  }

  .home-footer {
    padding: 1rem;
    width: 100%;
    color: aliceblue;
    font-size: 1rem;
    position: absolute;
    bottom: 0;

    .b_b {
      color: #fff;
    }
  }

}

.anchor {
  color: #ccc;

  &:hover {
    color: #88f;
  }
}
</style>



